<template>
  <view>
    <zero-loading v-if="loading"></zero-loading>
    <view class="search-box">
      <uni-search-bar @input="input()" :value="kw" @confirm="confirmTap" :radius="100" cancelButton="none"
        bgColor="#dcdcdc"></uni-search-bar>
    </view>
    <view v-if="bool" class="history">
      <view class="history-title">
        <text>搜索历史</text>
        <icon type="clear" size="17" @click="rmhistoryList()"></icon>
      </view>
      <view v-if="historyList.length != 0" class="yes-history">
        <view class="his-item" v-for="(item,i) in historyList" :key="i">
          <text @click="hisSearch(item)">{{item}}</text>
        </view>
      </view>
      <view v-else class="no-history">
        <text>暂无历史记录，快去搜索吧！</text>
      </view>
    </view>
    <view v-else class="tagbook">
      <view v-for="(item,index) in data" :key="index">
        <blog :data='item'></blog>
      </view>
    </view>
  </view>
</template>

<script>
  import {mapState,mapMutations} from 'vuex'
  export default {
    data() {
      return {
       kw: '',
       // 历史记录开关
       bool:true,
       //数据
       data:[],
       // 选中
       item:0,
       // 历史记录
       historyList:[],
       loading:false
      }
    },
    onLoad() {
      this.historyList = JSON.parse(uni.getStorageSync('historyList') || '[]')
    },
    methods: {
      ...mapMutations('m_searsh',['updateHistoryList']),
      confirmTap: function() {
        let that = this;
      		that.goToSearch()
      },
      input(e) {
        this.kw = e.trim()
      },
      goToSearch() {
        if (!this.kw.trim()) {
          uni.showToast({
            title: '请输入搜索内容',
            icon: 'none'
          })
          return
        }
        this.savaHistory()
        this.searchBook(this.kw)
      },
       // 加入历史记录
       savaHistory(){
         if (this.historyList.indexOf(this.kw) != -1)
         {
           this.historyList.splice(this.historyList.indexOf(this.kw),1);
           this.historyList.unshift(this.kw)
         }
         else{
           this.historyList.unshift(this.kw)
         }
         this.updateHistoryList(this.historyList)
       },
       // 删除历史记录
       rmhistoryList(){
         if(this.historyList.length == 0)
         return uni.$showMsg('暂无搜索记录')
         uni.showModal({
           title:'提示',
           content:'删除搜索记录?',
           success:(res)=>{
             if(res.confirm){
               this.historyList = []
               this.updateHistoryList([])
               uni.$showMsg('删除成功！')
             }else{
               uni.$showMsg('取消成功！')
             }
           }
         })
       },
       // 点击历史搜索
       hisSearch(e){
         this.kw = e
         // this.goToSearch()
         console.log(this.kw);
       },
       searchBook(val){
         uni.$req.req(this,'gettagbook',{key:'name',value:val}).then((res)=>{
           let {result} = res
           if(result.code){
             this.data = result.data
             this.bool = false
           }
           else{
             return uni.$showMsg('没有找到数据')
           }
         })
       }
         
       
       }
    
  }
</script>

<style lang="scss">
  .search-box {
    background-color: #fff;
    position: sticky;
    top: 0px;
    z-index: 999;
    border-bottom: 2px solid #ccc;
  }
  .history{
    display: flex;
    flex-direction: column;
    padding: 5px 10px 0;
    .history-title{
      display: flex;
      justify-content: space-between;
      &>text{
        font-size: 13px;
        font-family: sans-serif;
        font-weight: bold;
      }
    }
    .yes-history{
      display: flex;
      flex-wrap: wrap;
      justify-content: start;
      margin-top: 10px;
      .his-item{
        font-size: 13px;
        color: #333;
        padding: 5px;
        margin: 5px 10px;
        background: #dcdcdc;
        border-radius: 15px;
      }
    }
    .no-history{
      margin-top: 30px;
      text-align: center;
      width: 100%;
    }
    
  }
  .tagbook{
    padding-top: 20px;
    width: 750rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>
